import Taro, { Component, Config } from '@tarojs/taro'
import { Image, Text, View } from '@tarojs/components'
import { OSS } from "@/config/config"
import { getPinkGoodsPage } from '@/api/pinkApi'
import { toGoodsPage } from "@/utils/page_router"
import { Loading } from '@/components/index'
import './index.scss'

export default class Index extends Component {
  state: any
  config: Config = {
    backgroundTextStyle: "dark",
    navigationBarTitleText: '拼团列表',
    navigationBarTextStyle: process.env.navigationBarTextStyle,
    navigationBarBackgroundColor: process.env.backgroundColor
  }

  constructor() {
    super(...arguments)
    this.state = {
      loading: true,
      goodsList: []
    }
  }

  componentDidMount() {
    this.getPage()
  }

  //  获取团购商品列表
  getPage() {
    getPinkGoodsPage({ page: 1, limit: 10 }).then(res => {
      const { list } = res.data
      this.setState({
        goodsList: list
      }, () => {
        this.setState({
          loading: false
        })
      })
    })
  }

  render() {
    const { loading, goodsList } = this.state
    return (<View className='page'>
      {loading && <Loading/>}
      <View className='page-scroll'>
        <Image src={`${OSS}/system/image/pt_bg.png`} className='page-bg'/>
        <View className='goods-list'>
          {
            goodsList.map(goods => {
              return (
                <View key={goods.id} className='goods-item' onClick={() => toGoodsPage(goods)}>
                  <View className='goods-img'>
                    <Image src={goods.coverImg} className=''/>
                  </View>
                  <View className='goods-info'>
                    <View className='goods-name t-o-e-2'>{goods.name}</View>
                    {/*<View className='user-list'>*/}
                    {/*  {*/}
                    {/*    userList.map((user, key) => {*/}
                    {/*      return (*/}
                    {/*        <Image key={key} src={user} className='user-item'/>*/}
                    {/*      )*/}
                    {/*    })*/}
                    {/*  }*/}
                    {/*  <View className='user-item user-more f-g-5 bnn-icon'>&#xe73a;</View>*/}
                    {/*</View>*/}
                    <View className='d-f a-i-b j-c-b'>
                      <View className='goods-price d-f a-i-b bnn-number'>
                        <View className='sale-price'>
                          <Text className='sale-price__unit'>￥</Text>
                          {goods.salePrice}
                        </View>
                        <View className='origin-price'>￥{goods.originPrice}</View>
                      </View>
                      <View className='buy-btn f-g-5' hoverClass='hover-class--btn'>立即购买</View>
                    </View>
                  </View>
                </View>
              )
            })
          }
        </View>
      </View>
    </View>)
  }
}
